<template>
  <div>
    <header-login />
    <div class="bgc-white bar-shadow position-r">
      <div class="container-width">
        <logo-shop-bar :shop-info="true" :shop-info-data="shopInfoData" :advantage="true" />
        <category-bar v-if="!noneGoodsData" :collapse="false" />
      </div>
    </div>
    <template v-if="!noneGoodsData">
      <div class="bgc-white pad-t-19 pad-b-28">
        <div class="container-width">
          <goods-info v-if="goodsData" :goodsDataInfo="goodsData" />
        </div>
      </div>
      <div class="container-width">
        <div class="bgc-white mar-t-20 mar-b-20">
          <shop-recommend-goods />
        </div>
        <div class="detail-container mar-b-20">
          <div class="bgc-white detail-left mar-r-20" v-if="salesGoodsRankList && salesGoodsRankList.length > 0">
            <goods-hot />
          </div>
          <div class="bgc-white detail-right flex-item">
            <div class="goods-detail-title flex v-align-c mar-t-16 pad-b-18 pad-l-20">
              <span class="width-4 height-20 mar-r-10 mar-b--2" />
              <h2>商品详情</h2>
            </div>
            <goods-parameters />
            <goods-detail />
          </div>
        </div>
      </div>
    </template>
    <!-- 空数据展示 -->
    <div v-if="noneGoodsData" class="container-width bgc-white">
      <none-data />
    </div>
    <div class="bgc-white">
      <div class="container-width">
        <footer-links />
      </div>
      <div class="footer-line" />
      <div class="container-width">
        <footer-infos />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    onMounted,
    ref,
    provide
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import headerLogin from '@/components/headerLogin/index.vue'
  import logoShopBar from '@/components/logoShopBar/index.vue'
  import categoryBar from '@/components/categoryBar/index.vue'
  import goodsInfo from './components/goodsInfo/index.vue'
  import shopRecommendGoods from './components/shopRecommendGoods/index.vue'
  import goodsHot from './components/goodsHot/index.vue'
  import goodsParameters from './components/goodsParameters/index.vue'
  import goodsDetail from './components/goodsDetail/index.vue'
  import footerLinks from '@/components/footerLinks/index.vue'
  import footerInfos from '@/components/footerInfos/index.vue'
  import pic7 from '@/assets/images/uploads/pic-7.png'
  import {
    getGoodsDetail
  } from '@/api/goods/goods'
  import noneData from './components/noneData/index.vue'

  export default defineComponent({
    name: 'Index',
    components: {
      headerLogin,
      logoShopBar,
      categoryBar,
      goodsInfo,
      shopRecommendGoods,
      goodsHot,
      goodsParameters,
      goodsDetail,
      footerLinks,
      footerInfos,
      noneData
    },
    setup() {
      const router = useRouter()
      const goodsId = router.currentRoute.value.query.goodsId
      const goodsData = ref({})
      const shopInfoData = ref({})

      const goodsParameters = ref([])
      provide('goodsParameters', goodsParameters)

      const recommendGoodsList = ref([])
      provide('recommendGoodsList', recommendGoodsList)

      const salesGoodsRankList = ref([])
      provide('salesGoodsRankList', salesGoodsRankList)

      const detailsTemplateList = ref([])
      provide('detailsTemplateList', detailsTemplateList)

      const noneGoodsData = ref( < boolean > false)

      onMounted(() => {
        getDetailMethod()
      })
      const goNext = (id: string) => {
        id = '35'
        router.push('/shop/detail/' + id)
      }

      const getDetailMethod = () => {
        getGoodsDetail({
          goodsId: goodsId
        }).then(response => {
          if (!response.isError && response.data) {
            goodsData.value = response.data
            // 商品参数
            goodsParameters.value = goodsData.value.goodsParameters
            // 商品推荐
            recommendGoodsList.value = goodsData.value.recommendGoodsList
            // 商品销量排行
            salesGoodsRankList.value = goodsData.value.salesGoodsRankList
            // 商品详情
            detailsTemplateList.value = goodsData.value.detailsTemplateList
            // 店铺信息
            shopInfoData.value = goodsData.value.shopInfo
          } else {
            noneGoodsData.value = true
          }
        })
      }

      return {
        pic7,
        goNext,
        goodsData,
        salesGoodsRankList,
        shopInfoData,
        noneGoodsData
      }
    },
    metaInfo() {
      return {
        title: '商品详情',
        meta: [{
            name: 'keywords',
            content: '商品详情-关键字'
          },
          {
            name: 'description',
            content: '商品详情-描述'
          }
        ]
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;

  .bar-shadow {
    box-shadow: 0px 4px 6px 0px rgba(183, 183, 183, 0.16);
  }

  .detail-container {
    &:after {
      content: '';
      display: block;
      clear: both;
      font-size: 0;
    }

    .detail-left {
      width: 230px;
      float: left;
    }

    .detail-right {
      float: left;
      width: 1150px;
      min-height: 500px;

      .goods-detail-title {
        border-bottom: #f2f2f2 2px solid;

        span {
          background: $darkBlue;
        }

        h2 {
          margin: 0px 0 0 0;
          padding: 0;
          font-weight: normal;
          font-size: 20px;
        }
      }
    }

  }

  .line-shop {
    height: 2px;
    background: $darkBlue;
  }

  .shop-h-pic {
    height: 108px;

    img {
      max-height: 108px;
    }
  }

  .space-category {
    width: 264px;
  }

  .slider-sign-notice {
    width: 232px;
  }

  .footer-line {
    height: 1px;
    background: #dbdbdb;
    margin: 0 3%;
  }
</style>
